<template>
  <div class="right-right-pie">
    <div id="right-right-pie-chart"></div>
    <div id="right-right-pie-chart2">222222</div>
  </div>
</template>

<script>
export default {
  name: 'RightTwoRightPie',
  components: {},
  data () {
    return {
      option: {
        title: {
          text: '{a|90}' + '{b|%}',
          x: 'center',
          y: '32%',
          textStyle: {
            rich: {
              a: {
                fontSize: 24,
                color: '#fff'
              },
              b: {
                fontSize: 20,
                color: '#fff'
                // padding: [0, 0, 14, 0]
              }
            }
          }
        },
        legend: {
          type: 'plain',
          orient: 'vertical',
          bottom: '10%',
          left: '15%',
          align: 'center',
          data: [{
            name: '机构实名认证',
            icon: 'none',
            textStyle: {
              fontSize: 16,
              fontWeight: 550,
              color: '#ffd84a'
            }
          }]
        },
        series: [
          {
            type: 'gauge',
            radius: '80%',
            center: ['50%', '40%'],
            clockwise: false,
            startAngle: '90',
            endAngle: '-269.9999',
            splitNumber: 25,
            detail: {
              offsetCenter: [0, -20],
              formatter: ' '
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0, '#2CFAFC'],
                  [90 / 100, 'rgba(255,216,74,1)'],
                  [1, 'rgba(255,216,74,0.9)']
                ],
                width: 30
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: '#051F54',
                width: 6
              }
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: 'pie',
            name: '内层细圆环',
            radius: ['63%', '65%'],
            center: ['50%', '40%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: '#0C355E'
              }
            },
            label: {
              show: false
            },
            data: [100]
          },
          {
            type: 'pie',
            name: '内层环',
            radius: [0, '63%'],
            center: ['50%', '40%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: '#02163F'
              }
            },
            label: {
              show: false
            },
            data: [{
              name: '机构实名认证',
              value: 100
            }]
          }
        ]
      },
      option2: {
        title: {
          text: '{a|99}' + '{b|%}',
          x: 'center',
          y: '32%',
          textStyle: {
            rich: {
              a: {
                fontSize: 24,
                color: '#fff'
              },
              b: {
                fontSize: 20,
                color: '#fff'
                // padding: [0, 0, 14, 0]
              }
            }
          }
        },
        legend: {
          type: 'plain',
          orient: 'vertical',
          bottom: '10%',
          left: '15%',
          align: 'center',
          data: [{
            name: '个人实名认证',
            icon: 'none',
            textStyle: {
              fontSize: 16,
              fontWeight: 550,
              color: '#2cb6ff'
            }
          }]
        },
        series: [
          {
            type: 'gauge',
            radius: '80%',
            center: ['50%', '40%'],
            clockwise: false,
            startAngle: '90',
            endAngle: '-269.9999',
            splitNumber: 25,
            detail: {
              offsetCenter: [0, -20],
              formatter: ' '
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0, '#2CFAFC'],
                  [99 / 100, 'rgba(43, 183, 255, 1)'],
                  [1, 'rgba(43, 183, 255, 0.9)']
                ],
                width: 30
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: '#051F54',
                width: 6
              }
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: 'pie',
            name: '内层细圆环',
            radius: ['63%', '65%'],
            center: ['50%', '40%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: '#0C355E'
              }
            },
            label: {
              show: false
            },
            data: [100]
          },
          {
            type: 'pie',
            name: '内层环',
            radius: [0, '63%'],
            center: ['50%', '40%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: '#02163F'
              }
            },
            label: {
              show: false
            },
            data: [{
              name: '个人实名认证',
              value: 100
            }]
          }
        ]
      }
    }
  },
  methods: {},
  mounted () {
    let chart = this.$echarts.init(document.getElementById('right-right-pie-chart'))
    let chart2 = this.$echarts.init(document.getElementById('right-right-pie-chart2'))
    chart.setOption(this.option)
    chart2.setOption(this.option2)
  }
}
</script>

<style lang="less" scoped>
.right-right-pie {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;

  #right-right-pie-chart {
    width: 50%;
    height: 100%;
  }

  #right-right-pie-chart2 {
    width: 50%;
    height: 100%;
  }
}
</style>
